<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>解析Navigator</title>
        <style>
            .wrapper { border: 1px solid blue; margin: 15px auto; }
            p.title { margin: 10px; color: blue; }
            .wrapper>div { border: 1px solid #dfdfdf; margin: 10px; }
        </style>

    </head>
    <body>
        <h1>解析Navigator和Navigator</h1>
        <div class="wrapper static">
            <p class="title">Navigator的类属性(含值属性和函数属性)</p>
        </div>
        <div class="wrapper prototype">
            <p class="title">Navigator的原型属性(含值属性和函数属性)</p>
        </div>
        <div class="wrapper instance">
            <p class="title">navigator实例的属性(含值属性和函数属性)</p>
        </div>
        <script>
            (function(){
                const staticWrapper = document.querySelector('.static');
                // 获取 Navigator 所有 类属性名称组成的数组并遍历该数组
                Object.getOwnPropertyNames(Navigator).forEach( name => {
                    let child = document.createElement('div');
                    child.innerHTML = name;
                    staticWrapper.appendChild(child);
                });

                const protoWrapper = document.querySelector('.prototype');
                // 获取 Navigator.prototype 所有属性名称组成的数组并遍历该数组
                Object.getOwnPropertyNames(Navigator.prototype).forEach( name => {
                    let child = document.createElement('div');
                    child.innerHTML = name;
                    protoWrapper.appendChild(child);
                });

                const instanceWrapper = document.querySelector('.instance');
                // 获取 navigator实例 所有属性名称组成的数组并遍历该数组
                Object.getOwnPropertyNames(navigator).forEach( property => {
                    let child = document.createElement('div');
                    child.innerHTML = property + ' : ' + navigator[property] ;
                    instanceWrapper.appendChild(child);
                });

            })();
        </script>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator">MDN Docs: Navigator</a>
    </body>
</html>